<template>
  <div>
    <!-- {{ multipleSelection }} -->
    <section>
      <el-button type="primary" icon="el-icon-plus" @click="addBtn"
        >增加</el-button
      >
      <el-button type="danger" icon="el-icon-delete" @click="delManyFun"
        >批量删除</el-button
      >
    </section>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="closeFun"
    >
      <img
        :src="imgUrl"
        style="width:100px;height:100px"
        :class="{ hideimg: !imgblo }"
        @click="changeImgFun"
        v-if="title == '编辑轮播图'"
        alt=""
      />
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-upload
          action="#"
          ref="upload"
          :multiple="false"
          list-type="picture-card"
          :http-request="uploadAjax"
          :on-change="onchangImg"
          :auto-upload="false"
          :class="{ okupload: imgUrl }"
        >
          <i slot="default" class="el-icon-plus" v-if="!imgUrl"></i>

          <div slot="file">
            <img
              class="el-upload-list__item-thumbnail"
              @click="changeImgFun"
              :src="imgUrl"
              alt=""
            />
          </div>
        </el-upload>

        <el-form-item label="跳转连接" prop="hrefinput">
          <el-input v-model="ruleForm.hrefinput"></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="rangkinput">
          <el-input v-model="ruleForm.rangkinput"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button type="default" @click="dialogFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="轮播图">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->

          <img
            class="listimg"
            :src="scope.row.carouselUrl"
            alt="这是一个图片"
          />
        </template>
      </el-table-column>
      <el-table-column prop="" label="跳转连接">
        <template slot-scope="scope">
          <el-link :href="scope.row.redirectUrl" target="_blank">{{ scope.row.redirectUrl }}</el-link>
  
         </template>
      
      </el-table-column>
      <el-table-column prop="carouselRank" label="排序" show-overflow-tooltip>
        
        
      </el-table-column>

      <el-table-column prop="createTime" label="添加时间" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-popover
            popper-class="popper-class"
            placement="top"
            width="240"
            :ref="`popover-audit-${scope.row.id}`"
          >
            <div>
              <p>是否删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="text" size="mini" @click="cancel()"
                  >取消</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDelete(scope.$index, scope.row)"
                  >确定</el-button
                >
              </div>
            </div>
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popover>

          <!-- <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      tableData: [],
      multipleSelection: [],
      pageSize: 10,
      totalCount: 0,
      // 增加功能
      dialogFormVisible: false,//弹框开关

      ruleForm: {
        hrefinput: "",
        rangkinput: "",
      },
      rules: {
        rangkinput: [
          { required: true, message: "请输入排序标号", trigger: "blur" },
        ],
      },
      limit: 1,
      imgUrl: "",
      visible: true, //弹出框
      imgblo: true,

      carouselId: "", //存放数据
    };
  },

  mounted() {
    //第一页数据  10条
    this.getPageFun(1);
  },

  methods: {
    cancel() {
      document.body.click();
    },
    changeImgFun() {
      this.$refs["upload"].$refs["upload-inner"].handleClick(); //单机图片 触发图片上传
      // this.imgblo = false;
    },
    closeFun() {
      this.$refs.upload.clearFiles(); //弹窗关闭了 清空图片
      this.imgUrl = "";
      this.ruleForm.hrefinput = "";
      this.ruleForm.rangkinput = "";
      this.carouselId = "";
    },
    addBtn() {
      //情况文本框值
      this.title = "增加轮播图";
      this.dialogFormVisible = true;
      // this.$refs.upload.clearFiles();
    },
    onchangImg(file, fileList) {
      // this.$refs.upload.clearFiles();
      if (this.$refs.upload.uploadFiles.length > 1) {
        this.$refs.upload.uploadFiles.shift();
      }
      // this.$refs.upload.uploadFiles.shift()
      //  console.log(file, fileList);//ajax****
      this.uploadAjax(file);
    },
    async uploadAjax(file) { //上传图片
     
      let formData = new FormData();
      formData.append("file", file.raw);
      let result = await this.$http.post("/upload/file", formData);

      console.log(result);
      this.imgUrl = result.data;
      this.imgblo = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');  ajax
          if (this.title == "增加轮播图") {
            this.addImgloop(); //增加轮播
          } else {
            console.log("编辑");
            this.editorFun();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async addImgloop() {
      //增加
      let result = await this.$http.post("/carousels", {
        carouselRank: this.ruleForm.rangkinput,
        carouselUrl: this.imgUrl,
        redirectUrl: this.ruleForm.hrefinput,
      });
      this.dialogFormVisible = false;

      console.log(result);
      this.imgblo=true;
      this.getPageFun(1);
    },
    async editorFun() {
      //修改图片
      //ajax请求
      // this.imgblo=true;
      let result = await this.$http.put("/carousels", {
        
          carouselId: this.carouselId,
          carouselRank: this.ruleForm.rangkinput,
          carouselUrl: this.imgUrl,
          redirectUrl: this.ruleForm.hrefinput,
        
      });
      this.imgblo=true;
      this.dialogFormVisible = false;

      console.log(result);
      this.getPageFun(1);
    },
    async getPageFun(page) {
      //获取

      let result = await this.$http.get("/carousels", {
        params: {
          pageNumber: page,
          pageSize: 10,
        },
      });
      console.log(result);
      this.totalCount = result.data.totalCount; //获取所有数据 条数

      this.tableData = result.data.list;

      this.imgUrl = "";
      this.ruleForm.hrefinput = "";
      this.ruleForm.rangkinput = "";
    },

    handleCurrentChange(page) {
      this.getPageFun(page); // console.log(arg);// ajax请求
    },
    handleEdit(index, row) {
      //编辑事件
      this.imgblo=true;
      this.title = "编辑轮播图";
      this.dialogFormVisible = true;
      console.log(index, row);
      this.carouselId = row.carouselId;
      this.imgUrl = row.carouselUrl;
      this.ruleForm.hrefinput = row.redirectUrl;
      this.ruleForm.rangkinput = row.carouselRank;
    },
    async handleDelete(index, row) {
      //删除一个 这里
      console.log(row.carouselId);
      var arry = [row.carouselId];
      let result = await this.$http.delete("/carousels", {
        data: {
          ids: arry,
        },
      });

      console.log(result);
      this.cancel(); //隐藏弹框
      this.getPageFun(1);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delManyFun() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //成功按钮
          if (this.multipleSelection.length > 0) {
            console.log("删除");
            var arry = [];
            this.multipleSelection.map((item) => {
              arry.push(item.carouselId);
            });
            console.log(arry); //ajax请求参数

            let result = await this.$http.delete("/carousels", {
              data: {
                ids: arry,
              },
            });

            this.getPageFun(1);
          } else {
            console.log("空的数组");
          }
        })
        .catch(() => {
          //取消按钮
        });
    },
  },
};
</script>

<style scoped>
.listimg {
  width: 100px;
  height: 100px;
}

::v-deep .okupload .el-upload--picture-card {
  display: none;
}
.hideimg {
  display: none;
}
</style>